<template>
  <view class="popular-car">
    <view class="code" v-if="showStatus">0{{index + 1}}</view>
    <view class="car-content">
        <view class="commission" v-if="showStatus">
            前一周总佣金: {{ item.commission / 100}}元
        </view>
        <view class="car-info">
            <image style="width: 120rpx;height: 120rpx;"
             :src="item.image"></image>
             <view class="car-body">
                    <view class="body-title"> 
                            {{item.name}}
                    </view>

                    <view class="body-content"> 
                           {{item.content}}
                    </view>
                    <view class="platform">
                        <text>支持平台: <image src="/static/dy-logo.png"></image></text>
                    </view>
             </view>
        </view>
    </view>
    <view class="promotion">
        <view @click="direct" class="promotion-but"> 直接推广</view>
        <view @click="main" class="promotion-but promotion-main"> 主页推广</view>
    </view>
  </view>
  <Main v-model:mainShow="mainShow" :leaderboard="item" />
  <Direct v-model:directShow="directShow"  :leaderboard="item" />
</template>

<script setup lang="ts">
import type{ Leaderboard } from "@/api/model/dyUserCodeModel";
import type{ DyPlaying  } from "@/api/model/dyUserCodeModel";
import  Main  from "./Main.vue";
import Direct from "./Direct.vue";
interface IProps {
  item:Leaderboard | DyPlaying
  index:number
  showStatus:boolean
}
withDefaults(defineProps<IProps>(), {})
const mainShow = ref(false)
const directShow = ref(false)

const main = ()=>{
    mainShow.value = true

}

const direct = ()=>{
    directShow.value = true
}

</script>

<style lang="scss" scoped>
.popular-car{
    display: flex;
    align-items: center;
    margin:28rpx 0 40rpx 0;
    .code{
        margin-right: 25rpx;
        font-size: 40rpx;
    }
    .car-content{
        .commission{
            font-size: 23rpx;
            margin-bottom: 10rpx;
            color: rgb(203,138,70);
        }

        .car-info{
            display: flex;
            image{
                border-radius: 10rpx;
            }
            .car-body{
                margin-left: 20rpx;
                .body-title{
                    font-weight: bold;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 280rpx;
                }
                .body-content{
                    font-size: 23rpx;
                    margin: 5rpx 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 300rpx;
                    color: $uni-text-color-disable;

                }
                .platform{
                    font-size: 24rpx;
                    display: flex;
                    align-items: center;
                    color: $uni-text-color-placeholder;
                    image{
                        width: 28rpx;
                        height: 28rpx;
                        margin-left: 20rpx;
                        position: relative;
                        top: 5rpx;
                    }
                }

            }

        }

    }
    .promotion{
        .promotion-but{
            font-size: 25rpx;
            height: 50rpx;
            background: rgb(112,92,226);
            color: white;
            line-height: 50rpx;
            width: 160rpx;
            text-align: center;
            border-radius: 10rpx;
            margin-left: 20rpx;
            
        }

        .promotion-main{
            position: relative;
            top: 20rpx;
            background: white;
            color: rgb(112,92,226);
            border: 1rpx solid rgb(112,92,226);
            background: rgb(239,236,255);
        }
    }
}

</style>
